<template>
  <div class="line-status-tv-page-wrapper">


    <div class="wrapper-header" style="position: relative;">
      <div style="position:absolute;left:10px;">{{$getTextByLangKey('SMT电子看板')}}</div>
      <div style="position:absolute;right:10px;font-size: 28px">{{companyName}}</div>
      <span class="title">{{contentTitle}}</span>
      <!--<span>{{testNum}}</span>-->
      <!--<div style="position:absolute;right:10px;top: 50%;transform: translate(0, -50%);"><v-clock ></v-clock></div>-->

    </div>

    <div class="wrapper-now-info">
      <div class="part one">
        <span class="item">{{$getTextByLangKey('机型')}}<br>{{nowProduce.machineType}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('工单号')}}<br>{{nowProduce.workOrder}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('程序名称')}}<br>{{nowProduce.programName}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('计划数量')}}<br>{{nowProduce.plannedQuantity}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('已生产数')}}<br>{{nowProduce.hasProducedQuantity}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('开始时间')}}<br>{{nowProduce.startTime?nowProduce.startTime.substring(5,nowProduce.startTime.length):''}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('贴装时间')}}<br>{{nowProduce.duration}}</span>
        <span class="vertical-line"></span>
        <!--<span class="item">已生产数<br>{{nowProduce.hasProducedQuantity}}</span>-->
        <span class="item"><br></span>
      </div>

<!--      shiftType:''//白班 夜班 Day shift Night shift-->
      <div class="part two" v-if="shiftType === '白班' || shiftType === 'Day shift'">
        <span class="item">{{$getTextByLangKey('工艺')}}<br>{{nowProduce.technology}}</span>
        <span class="vertical-line"></span>
        <span class="item">QC<br>{{nowProduce.qc}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('组长')}}<br>{{nowProduce.groupLeader}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('设备工程师')}}<br>{{nowProduce.technician}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('AOI工程师')}}<br>{{nowProduce.engineer}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('操作员')}}<br>{{nowProduce.operator}}</span>
        <span class="vertical-line"></span>
        <span class="item">IPQC<br>{{nowProduce.ipqc}}</span>
        <span class="vertical-line"></span>
        <span class="item">AOI测试员<br>{{nowProduce.pe}}</span>
      </div>

      <div class="part two" v-if="shiftType === '夜班' || shiftType === 'Night shift'">
        <span class="item">{{$getTextByLangKey('工艺')}}<br>{{nowProduce.nightTechnology}}</span>
        <span class="vertical-line"></span>
        <span class="item">QC<br>{{nowProduce.nightQc}}</span>

        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('组长')}}<br>{{nowProduce.nightGroupLeader}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('设备工程师')}}<br>{{nowProduce.nightTechnician}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('AOI工程师')}}<br>{{nowProduce.nightEngineer}}</span>
        <span class="vertical-line"></span>
        <span class="item">{{$getTextByLangKey('操作员')}}<br>{{nowProduce.nightOperator}}</span>

        <span class="vertical-line"></span>
        <span class="item">IPQC<br>{{nowProduce.nightIpqc}}</span>
        <span class="vertical-line"></span>
        <span class="item">AOI测试员<br>{{nowProduce.nightPe}}</span>

      </div>
    </div>

    <div class="wrapper-table">
<!--      <table id="customers">-->
<!--        <tbody>-->
<!--        <tr class="table-header">-->
<!--          <template v-for="item in tableHeader">-->
<!--            <th class="one-line">{{item.label}}</th>-->
<!--          </template>-->
<!--        </tr>-->

<!--        <template v-for="dataitem,index in tableData2">-->
<!--          <tr class="table-row" :class="index%2===1?'alt':''">-->
<!--            <td class="one-line" v-for="headitem in tableHeader">{{dataitem[headitem.prop]}}</td>-->
<!--          </tr>-->
<!--        </template>-->

<!--        </tbody>-->
<!--      </table>-->


      <el-carousel  direction="vertical" :autoplay="true" :interval="10000" indicator-position="none" arrow="never" class="m-el-carousel" height="176px">
        <el-carousel-item class="m-el-carousel-item">
          <table id="customers">
            <tbody>
            <tr class="table-header">
              <template v-for="item in tableHeader">
                <th class="one-line">{{item.label}}</th>
              </template>
            </tr>

            <template v-for="dataitem,index in tableData1">
              <tr class="table-row" :class="index%2===1?'alt':''">
                <td class="one-line" v-for="headitem in tableHeader">{{dataitem[headitem.prop]}}</td>
              </tr>
            </template>

            </tbody>
          </table>
        </el-carousel-item>
        <el-carousel-item class="m-el-carousel-item" v-if="tableData2.length>0">
          <table id="customers2">
            <tbody>
            <tr class="table-header">
              <template v-for="item in tableHeader">
                <th class="one-line">{{item.label}}</th>
              </template>
            </tr>

            <template v-for="dataitem,index in tableData2">
              <tr class="table-row" :class="index%2===1?'alt':''">
                <td class="one-line" v-for="headitem in tableHeader">{{dataitem[headitem.prop]}}</td>
              </tr>
            </template>

            </tbody>
          </table>
        </el-carousel-item>
      </el-carousel>
    </div>


    <div class="wrapper-header" style="position: relative;padding-top: 8px;margin-top: 10px;">
      <span class="title">当前换料记录</span>
    </div>
    <div class="wrapper-table">
      <table id="customers-scan" width="100%" style="table-layout:fixed">
        <tbody class="second-table">
        <tr class="table-header">
          <template v-for="(item,hIndex) in scantableHeader">
            <th class="one-line" :class="'one-line-'+hIndex">{{item.label}}</th>
          </template>
        </tr>

        <template v-for="dataitem,index in scantableData">
          <tr class="table-row" :class="(index%2===1?'alt ':'')+ ' one-line-'+index">
            <td class="one-line" v-for="headitem,rindex in scantableHeader">
              <i class="el-icon-warning" style="color: red" v-if="rindex === 0&&dataitem.isShowHighLight"></i>
              <span>{{dataitem[headitem.prop]}}</span>
            </td>
          </tr>
        </template>



        </tbody>
      </table>
    </div>
    <div class="wrapper-auto-flex">
    </div>
    <div class="wrapper-footer">
      <span>Copyright © 2013-2024 {{$getTextByLangKey('深圳市华师特科技有限公司')}}</span>
    </div>
    <user-check></user-check>
  </div>


</template>

<script>


  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import remarkDialog from '@/base/editLineHourInfoDialog.vue'
  import lineStatusAction from '@/base/lineStatusAction.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'
  import clock from '@/base/Clock.vue'
  import usercheck from '@/base/usercheck.vue'

  export default {
    data() {
      return {

        chanxian: '',
        contentTitle:this.$getTextByLangKey('生产状况'),

        nowProduce: {},
        waitProduce: {},

        tableHeader: [],
        tableData: [],
        showClock: false,
        showTv: false,

        page: null,

        scantableHeader: [],
        scantableData: [],
        dialogVisible: false,
        formData: {
          designedOutput: '',//计划产出
          note: '',//备注
        },
        rowIndex: 0,

//        这是实现自动刷新功能的
        timer: '',
        isRequesting: false,


        tableData1:[],
        tableData2:[],
        testNum:0,
        shiftType:'',//白班 夜班 Day shift Night shift
        companyName:''
      }
    },
    created: function () {

      this.fetchData()
      this.fetchCompanyName()

    },

    destroyed: function () {
      this.stopTimer()
      console.log('---- destroyed ----')
    },


    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {


      fetchData: function () {

        this.stopTimer()
        this.tableHeader = []
        this.tableData = []
        this.nowProduce = {}
        this.waitProduce = {}

        this.chanxian = this.$route.query.chanxian
        this.contentTitle = this.chanxian + this.$getTextByLangKey('生产状况')

        let path = this.$route.path
        if (path.startsWith('/wrapper')) {
          this.showTv = true
          this.showClock = false
        } else {
          this.showTv = false
          this.showClock = true
        }

        this.creatTimer()
      },


      handleEdit: function (index, row) {
//        console.log(index)
//        console.log(row)
//        console.log('--------')
//        this.$emit('handleEdit', index, row)

        this.dialogVisible = true
        this.formData = util.deepCopy(row)
        this.rowIndex = index
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
//        console.log('sbsbsbsb')
        this.page.currentPage = val
//        this.fetchData()
      },

      cancelDialog: function () {
        this.dialogVisible = false;
      },
      confrimDialog: function (val, index) {
        this.dialogVisible = false;
        let data = {id: val.id, designedOutput: val.designedOutput, note: val.note}
//        console.log(data)
        request.requestUpdateProducingHours(data, res => {

          let tableData = util.deepCopy(this.tableData)
          tableData[index] = val
          this.tableData = tableData
          util.showSuccessToast(this.$getTextByLangKey('修改成功'))
        })
//        this.$emit('confrimDialog', this.excelForm)
      },
      updateNowProduce: function (val) {
        val.startTime = this.getTimeToDate(val.startTime)
        val.finalTime = this.getTimeToDate(val.finalTime)
        val.estimateFinishTime = this.getTimeToDate(val.estimateFinishTime)
        val.estimateStartTime = this.getTimeToDate(val.estimateStartTime)
        this.nowProduce = val
      },

      updateWaitProduce: function (val) {
        val.startTime = this.getTimeToDate(val.startTime)
        val.finalTime = this.getTimeToDate(val.finalTime)
        val.estimateFinishTime = this.getTimeToDate(val.estimateFinishTime)
        val.estimateStartTime = this.getTimeToDate(val.estimateStartTime)
        this.waitProduce = val
      },


      creatTimer: function () {
        this.autoRequest()
        this.timer = setInterval(() => {
          if (!this.isRequesting) {
//            console.log('开始自动请求')
            this.autoRequest()
          } else {
//            console.log('请求结果未返回')
          }
        }, 3000)
      },
      stopTimer: function () {
        clearTimeout(this.timer)
        this.isRequesting = false
      },

      getTimeToDate: function (time) {

        if (time != null) {
          var date = new Date(time).format("yyyy/MM/dd hh:mm")
          return date
        }
        return ''
      },

      fetchCompanyName(){
        request.requestGetCompanyName(res=>{
          console.log('res.data.data',res)
          this.companyName = res.data.data
        })
      },
      autoRequest: function () {
        this.isRequesting = true
        console.log('电视机请求产线生产状况')
        this.testNum++
        this.fetchScanList(this.chanxian)
        request.requestLineStatus(this.chanxian, res => {
          this.isRequesting = false
          if (res.data.data.nowProduce === null) {
            this.nowProduce = {}
          } else {
            let nowProduce = res.data.data.nowProduce
            nowProduce.startTime = this.getTimeToDate(nowProduce.startTime)
            nowProduce.finalTime = this.getTimeToDate(nowProduce.finalTime)
            nowProduce.estimateFinishTime = this.getTimeToDate(nowProduce.estimateFinishTime)
            nowProduce.estimateStartTime = this.getTimeToDate(nowProduce.estimateStartTime)
            this.nowProduce = nowProduce
          }

          if (res.data.data.waitProduce === null) {
            this.waitProduce = {}
          } else {
            let waitProduce = res.data.data.waitProduce
            waitProduce.startTime = this.getTimeToDate(waitProduce.startTime)
            waitProduce.finalTime = this.getTimeToDate(waitProduce.finalTime)
            waitProduce.estimateFinishTime = this.getTimeToDate(waitProduce.estimateFinishTime)
            waitProduce.estimateStartTime = this.getTimeToDate(waitProduce.estimateStartTime)
            this.waitProduce = waitProduce
          }
//          this.nowProduce = res.data.data.nowProduce===null?{}:res.data.data.nowProduce
//          this.waitProduce = res.data.data.waitProduce===null?{}:res.data.data.waitProduce

//          this.contentTitle = this.chanxian + '生产状况' + ' （ 当前 ：' + res.data.data.shiftType + ' ）'
          this.contentTitle = this.chanxian +"  "+res.data.data.shiftType
          this.shiftType = res.data.data.shiftType

          console.log(res.data.data)

          this.tableHeader = res.data.data.headers
//          this.tableHeader = [{prop:'createTime',label: '名称', isShow: true}, ]

          this.tableData = this.makeList(res.data.data.producingHours)

          this.tableData1 = this.tableData.slice(0,6)
          this.tableData2 = this.tableData.slice(6,12)

        }, res => {
          this.isRequesting = false
        })
      },

      makeHeader: function (list) {

        let indexItem = {
          type: 'index', isShow: true,
          width: '65', label: 'NO.',
        }

        let actionItem = {type: "action", label:this.$getTextByLangKey('操作'), isShow: true}
//        let selectionItem = {
//          type: 'selection', isShow: true
//        }
        var header = [indexItem]
        list.forEach(function (item) {
          item.isShow = true
          header.push(item)
        }, this)

        header.push(actionItem)
        return header
      },


      makeList: function (list) {
        var data = []
        list.forEach(function (item) {
          item.efficiency = item.efficiency===0?0:item.efficiency+'%'
          data.push(item)
        }, this)

        //只显示6条数据，需要包括当前时间
        const hour = new Date().getHours()

        const currentTime = hour>9?`${hour}:00`:`0${hour}:00`

        console.log('currentTime',currentTime)
        const currentTimeIndex = list.findIndex(x=>{
          return x.hourRange.startsWith(currentTime)
        })

        return data

        // if(currentTimeIndex === -1){
        //   return data.slice(0,6)
        // }
        //
        // if(currentTimeIndex < 3 ){
        //   return data.slice(0,6)
        // }
        // return data.slice(currentTimeIndex-2,currentTimeIndex+3)

      },

      fetchScanList(lineName){
        request.requestScanList(lineName,'', 1, 100, '', '', '', '',res=>{
          const resdata = res.data.data || {}
          // 设备，站位，扫描时间，用户，规格，正确编码1，扫入编码，换料数量
          this.scantableHeader = [
            {label: "设备", prop: "equipmentName"},
            {label: "站位", prop: "standPosition"},
            {label: "扫描时间", prop: "scanTime"},
            {label: "用户", prop: "username"},
            {label: "规格", prop: "spec"},
            {label: "正确编码1", prop: "rightCode1"},
            {label: "扫入编码", prop: "scanCode"},
            {label: "换料数量", prop: "changeQuantity"},
          ]
          this.scantableData = resdata.list.map(x=>{
            return {
              ...x,scanTime:this.getTimeToDate(x.scanTime)
            }
          }).slice(0,6)

        })
      }


    },


    components: {
      'card-component': card,
      'table-component': table,
      'action-componet': lineStatusAction,
      'remark-dialog': remarkDialog,
      'v-clock': clock,
      'user-check': usercheck,
    },

  }
</script>


<style scoped lang="stylus">

  .line-status-tv-page-wrapper {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width 100%
    padding: 8px 10px 0 10px
    display flex
    flex-direction column
    color white
    background-color #336699
    .one-line{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .wrapper-header {
      font-size 20px
      display: flex
      flex-direction row
      margin-bottom 8px
      .title {
        font-size 30px
        color: #303133
        color white
        flex 1
        text-align center
        font-weight bold
      }
    }

    .wrapper-now-info {
      .part {
        display: flex
        align-items center
        .item {
          text-align center
          line-height 20px
          font-size 18px
          max-width 12.5%
          width 12.5%
          color #000
          color white
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

        }
        .vertical-line {
          height 6px
          width 3px
          border-radius 6px
          background-color #ffffff
          margin 0 10px
        }

        &.two {
          margin-top 8px
          margin-bottom 8px
        }
      }
    }

    .wrapper-table {
      #customers,#customers-scan,#customers2,#customers2-scan {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        .table-header{
          th {
            color: #fff;
            background-color #003366
            border: 1px solid #003366;
            font-size: 18px;
            padding: 3px;
            vertical-align: top;
            text-align: left;


          }
        }

        .table-row{
          td {
            font-size: 18px;
            min-width: 24px;
            background-color #3399cc
            border: 1px solid #99cccc;
            padding: 3px;
            padding-top 3px
            vertical-align: top;
            font-weight bold
            color: #000000;
            color white
          }
          &.alt{
            td{
              font-weight bold
              color: #000000;
              color white
              border: 1px solid #3399cc;
              background-color: #99cccc;
            }
          }
        }
      }

    }

    .wrapper-auto-flex{
      flex: auto;
    }
    .wrapper-footer{
      height:14px;
      span{
        display: block;
        width: 100%;
        line-height: 14px;
        font-size 12px
        text-align: center;
        color: white;
      }
    }

    .m-el-carousel{

      width 100%
    }
    .m-el-carousel-item{

    }

    .second-table{
      th{
        &.one-line-0,&.one-line-1,&.one-line-3,&.one-line-4{
          width 80px !important
        }
        &.one-line-2{
          width 120px !important
        }
        &.one-line-5,&.one-line-6{
          width 170px !important
        }
      }
    }
  }


</style>


